<style>
    #backToTop {
        display: inline-block;
        background-color: #FF9800;
        width: 50px;
        height: 50px;
        text-align: center;
        border-radius: 4px;
        position: fixed;
        bottom: 30px;
        right: 30px;
        transition: background-color .3s,
            opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
        z-index: 1000;
    }

    #backToTop:after {
        content: "\f077";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #fff;
    }

    #backToTop:hover {
        cursor: pointer;
        background-color: #333;
    }

    #backToTop:active {
        background-color: #555;
    }

    #backToTop.show {
        opacity: 1;
        visibility: visible;
    }
</style>

<script type="text/javascript">
    // var backToTopTarget; // backToTopTarget created in file using this file.
    $(function () {
        var backToTop = $('#backToTop');
        $(backToTopTarget).scroll(function () {
            //console.log($(window).scrollTop())
            if ($(backToTopTarget).scrollTop() > 150) {
                backToTop.addClass('show');
            } else {
                backToTop.removeClass('show');
            }
        });

        backToTop.on('click', function (e) {
            e.preventDefault();
            $(backToTopTarget).animate({
                scrollTop: 0
            }, '300');
        });
    })
</script>

<a id="backToTop"></a>